<tc_include file="Portal/Public/style" />
    <title>首页</title>
<tc_include file="Portal/Public/header" />
<div class="box">
    <div class="banner_swiper">
        <div class="swiper-container" id="index_swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="__IMG__/banner1.jpg" alt=""/></div>
                <div class="swiper-slide"><img src="__IMG__/banner1.jpg" alt=""/></div>
                <div class="swiper-slide"><img src="__IMG__/banner1.jpg" alt=""/></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="main pt20 pb50">
        <div class="ind_left_cont fl">
            <div class="ind_news">
                <h2 class="c_h2">最新 <a class="more" href="javascript:;">更多</a></h2>
                <div class="ind_news_cont">
                    <div class="img1 pr mr20">
                        <div class="hot"><img src="__IMG__/hot2.png" width="84" height="39" alt=""/></div>
                        <img src="__IMG__/img1.jpg" alt=""/>
                        <p class="ellipsis">大数据未来的发展方向</p>
                    </div>
                    <div class="img3">
                        <img src="__IMG__/img2.jpg" alt=""/>
                        <p class="ellipsis2">人本数据和感知计算是大数据发展方向</p>
                    </div>
                    <div class="img3 mr20">
                        <img src="__IMG__/img3.jpg" alt=""/>
                        <p class="ellipsis2">人本数据和感知计算是大数据发展方向</p>
                    </div>
                    <div class="img3 mr20">
                        <img src="__IMG__/img4.jpg" alt=""/>
                        <p class="ellipsis2">人本数据和感知计算是大数据发展方向</p>
                    </div>
                    <div class="img3">
                        <img src="__IMG__/img5.jpg" alt=""/>
                        <p class="ellipsis2">人本数据和感知计算是大数据发展方向</p>
                    </div>
                </div>
                <div class="cb"></div>

            </div>
            <div class="ind_recommander mt30">
                <h2 class="c_h2">推荐 <a class="more" href="javascript:;">更多</a></h2>
                <div class="ind_recommander_cont oh">
                    <div class="img pr mr20">
                        <img src="__IMG__/img6.jpg" alt=""/>
                        <div class="bot">
                            <p class="tit">一图一世界</p>
                            <p class="ellipsis">大数据未来的发展方向</p>
                        </div>
                    </div>
                    <div class="img pr mr20">
                        <img src="__IMG__/img7.jpg" alt=""/>
                        <div class="bot">
                            <p class="tit">一图一世界</p>
                            <p class="ellipsis">大数据未来的发展方向</p>
                        </div>
                    </div>
                    <div class="img pr mr20">
                        <img src="__IMG__/img8.jpg" alt=""/>
                        <div class="bot">
                            <p class="tit">一图一世界</p>
                            <p class="ellipsis">大数据未来的发展方向</p>
                        </div>
                    </div>
                    <div class="img pr mr20">
                        <img src="__IMG__/img9.jpg" alt=""/>
                        <div class="bot">
                            <p class="tit">一图一世界</p>
                            <p class="ellipsis">大数据未来的发展方向</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ind_right_cont fr">
            <div class="hot">
                <h2>热门</h2>
                <div class="hot_nav"><span class="on">日</span><span>月</span><span>周</span></div>
                <div class="hot_man">
                    <div class="hot_mode ">
                        <img src="__IMG__/pt1.png" alt=""/>
                        <p class="ellipsis">神奇的世界</p>
                        <p class="ellipsis">解密昆士兰，赢取神秘之旅</p>
                    </div>
                    <div class="hot_mode">
                        <img src="__IMG__/pt2.png" alt=""/>
                        <p class="ellipsis">神奇的世界</p>
                        <p class="ellipsis">解密昆士兰，赢取神秘之旅</p>
                    </div>
                    <div class="hot_mode">
                        <img src="__IMG__/pt3.png" alt=""/>
                        <p class="ellipsis">神奇的世界</p>
                        <p class="ellipsis">解密昆士兰，赢取神秘之旅</p>
                    </div>
                </div>
            </div>
            <div class="honor mt10">
                <h2 class="mb20">荣誉榜 <img src="__IMG__/new.png" width="24" height="11" alt=""/></h2>
                <div class="honor_rank">
                    <div class="honor_mode oh">
                        <div class="rank"><span></span></div>
                        <img src="__IMG__/pt4.png" alt=""/>
                        <div class="fl">
                            <p class="tit ellipsis">神奇的世界</p>
                            <p class="lv">LV.45</p>
                        </div>
                        <div class="num">52</div>
                    </div>
                    <div class="honor_mode oh">
                        <div class="rank"><span></span></div>
                        <img src="__IMG__/pt4.png" alt=""/>
                        <div class="fl">
                            <p class="tit ellipsis">神奇的世界</p>
                            <p class="lv">LV.45</p>
                        </div>
                        <div class="num">52</div>
                    </div>
                    <div class="honor_mode oh">
                        <div class="rank"><span></span></div>
                        <img src="__IMG__/pt4.png" alt=""/>
                        <div class="fl">
                            <p class="tit ellipsis">神奇的世界</p>
                            <p class="lv">LV.45</p>
                        </div>
                        <div class="num">52</div>
                    </div>
                    <div class="honor_mode oh">
                        <div class="rank"><span></span></div>
                        <img src="__IMG__/pt4.png" alt=""/>
                        <div class="fl">
                            <p class="tit ellipsis">神奇的世界</p>
                            <p class="lv">LV.45</p>
                        </div>
                        <div class="num">52</div>
                    </div>
                    <div class="honor_mode oh">
                        <div class="rank"><span></span></div>
                        <img src="__IMG__/pt4.png" alt=""/>
                        <div class="fl">
                            <p class="tit ellipsis">神奇的世界</p>
                            <p class="lv">LV.45</p>
                        </div>
                        <div class="num">52</div>
                    </div>
                    <div class="honor_mode oh">
                        <div class="rank"><span></span></div>
                        <img src="__IMG__/pt4.png" alt=""/>
                        <div class="fl">
                            <p class="tit ellipsis">神奇的世界</p>
                            <p class="lv">LV.45</p>
                        </div>
                        <div class="num">52</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cb"></div>
    </div>
</div>
<tc_include file="Portal/Public/footer" />
<script>
    /**
     *
     * 这样可以获取php的值：
     *  var na = '<?php echo $nav ?>';
     *  alert(na);
     * @type {string}
     */

    $(".server_qh span").click(function(){
        var i = $(this).index();
        $(this).addClass("on").siblings().removeClass("on");
        $(".qimg img").eq(i).show().siblings().hide();
    });
    $(".qiehuan span").click(function(){
        $(this).addClass("on").siblings().removeClass("on");
    });
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        pagination: '.swiper-pagination',
        autoplayDisableOnInteraction : false,
        autoplay: 4000,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next'
    });


//    荣誉榜
    $(".honor_rank .honor_mode").each(function(i){
        if(i<=2){
            $(this).find(".rank span").remove();
        }else{
            $(this).find(".rank span").text(i+1);
        }
    });
    $(".hot_nav span").click(function(){
        $(this).addClass("on").siblings().removeClass("on");
    })
</script>
</body>
</html>